<template>
    <x-dialog
      v-model="showToastCom"
      class="register-dialog-demo"
      :hide-on-blur="true"
      @on-hide="hide"
    >
      <group class="captchaCell">
        <x-input placeholder="请输入图片信息" name="email" v-model="imgCode" class="font15" :show-clear="false" style="padding-right: 0;">
          <img :src="imgSrc" alt="" slot="right" v-if="imgSrc" @click="sendCode()" style="display: block;">
          <span slot="right" v-if="!imgSrc" style="color:red;" @click="sendCode()">请刷新</span>
        </x-input>
      </group>
      <div style="padding-top: 30px;">
        <x-button type="primary" @click.native="submit" class="captchaBtn" :disabled="disabledSubmit">
          完成
        </x-button>
      </div>
    </x-dialog>
</template>
<style>
  .captchaBtn{
    height: 48px;
    line-height: 48px;
  }
  .captchaCell .weui-cell{
    margin-bottom:0;
    margin-top: 15px;
  }
  .captchaCell .weui-cells:before{
    border:none;
  }
  .captchaCell .weui-cells{
      margin-top: 0!important;
  }
</style>
<script>
import { XInput,Group,XDialog } from 'vux'
  export default{
    props:{
      email:{
        default:'',
        type:String
      },
      showToast:{
        default:false
      },
    },
    data(){
        return {
          imgCode:'',
          imgSrc:'',
          codeDisabled:false,
          captchaKey:'',
          showToastCom:false,
          disabledSubmit:false
        }
    },
    watch:{
      showToast: {
        handler:function (newValue, oldValue) {
          this.showToastCom = newValue;
          if(newValue){
            this.sendCode()
          }
        }
      }
    },
    methods:{
      submit(){
        if(this.email){
          this.to_user('to_mobile');
        }else{
          this.to_user('to_user');
        }
      },
      sendCode(){
        this.imgSrc = '';
        this.imgCode = '';
        this.showToastCom = true;
        this.loading(true);
        this.service('captcha',{},'get').then((res)=>{
          this.loading(false);
          if(res.code!== 200){
            this.imgSrc = '';
            this.captchaKey = '';
          }else{
            this.imgSrc = res.data.img;
            this.captchaKey = res.data.captchaKey;
          }
        })
      },
      to_user(type){
        this.disabledSubmit = true;
        if(!this.imgCode){
          this.toastFn('请填写图形码','','warn');
          return;
        }
        this.codeDisabled = true;
        if(type == 'to_user'){
          var serv = this.service('to_user',{
            imgCaptcha:this.imgCode,
            captchaKey:this.captchaKey,
          },'post')
        }else if(type == 'to_mobile'){
          var serv = this.service('to_mobile',{
            mobile:this.email,
            captchaKey:this.captchaKey,
            imgCaptcha:this.imgCode,
          },'post')
        }
        serv.then(res=>{
          this.disabledSubmit = false;
          this.showToastCom = false;
          this.codeDisabled = false;
          if(res.code != 200){
            this.codeDisabled = false;
            this.toastFn(res.msg);
            return;
          }
          this.toastFn(res.msg,'','success');
          var smsCode = res.data.smsId
          this.$emit('setInter',smsCode);
        })
      },
      hide(){
        this.$emit('close')
      }
    },
    created(){
      this.showToastCom = this.showToast
    },
    components: {
      XInput,
      Group,
      XDialog
    }
  }
</script>
